<template>
  <div class="storePromotion">
    <div class="spinner" v-if="$store.state.loadingFlag">
      <div class="spinner-container container1">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
      <div class="spinner-container container2">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
      <div class="spinner-container container3">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
    </div>
    <el-row class="top">
      <el-col :span="12"><span>商家列表</span></el-col>
      <el-col :span="12">
        <el-button type="primary" class="primary sc" @click="delFlag=!delFlag" v-if="!delFlag">
         删 除
        </el-button>
        <el-button type="primary" class="primary sc" @click="delFlag=!delFlag" v-if="delFlag">
          完 成
        </el-button>
        <el-button type="primary" class="primary xj" @click="addList">
          <span style="font-size: 16px">+</span> <span>新 建</span>
        </el-button>
        <!--<el-button type="primary" class="primary sc">-->
        <!--<span>新建</span>-->
        <!--</el-button>-->
        </span>
      </el-col>
    </el-row>
    <div class="bigBox">
      <div class="midBox">
        <div class="menuC" v-for="(item,index) in storeList">
          <div @click="beforeUpload(index)" class="le">
            <el-upload
              class="upload-demo"
              drag
              :action="url"
              :on-success="handleSuccess"
              :file-list="objData.fileList[index]"
              :disabled="!displayList[index]"
              :before-upload="beforeAvatarUpload"
              multiple>
              <div v-if="!objData.fileList[index][0].url">
                <div style="margin-top: 40px;">推荐商家背景图</div>
                <div  style="margin-top: 30px;">（图片尺寸425x159）</div>
              </div>
              <div style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;">
                <img :src="objData.fileList[index][0].url" alt="" style="width: 100%;height: 100%;">
              </div>
              <!--<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->
            </el-upload>
          </div>
          <div class="search" v-if="displayList[index]">
            <el-select v-model="objData.storeNameList[index].storeId" placeholder="输入商家名称" filterable class="menu-select" style="margin-left: 28px;width: 80%;" >
              <el-option
                v-for="item in Delivery_status"
                :key="item.storeId"
                :label="item.storeName"
                :value="item.storeId">
              </el-option>
            </el-select>
            <el-input class="menu_input" v-model="objData.description[index]" style="width: 80%;margin-left: 28px;"   placeholder="输入商家推荐语"></el-input>
            <div style="text-align: center;margin-top: 10px;">
              <el-button type="primary" @click="cancel(index)" style="margin-right: 20px;width: 80px;">
                取 消
              </el-button>
              <el-button type="primary" @click="saveEdit(index)" style="width: 80px;">
                确 定
              </el-button>
            </div>
          </div>
          <div class="search1" v-if="!displayList[index]">
            <div style="color: rgba(89,115,128,1);font-size: 16px;font-weight: bold;padding:10px 0 0 30px;">{{storeList[index].storeName}}</div>
            <div style="color: rgba(89,115,128,1);font-size: 14px;padding: 30px 0 0 30px">{{objData.description[index]}}</div>
          </div>
          <div class="ri">
            <div style="padding-left: 30px;">
              <!--<span v-if="!flag[index]" @click="selectD(index)">请选择</span>-->
              <el-button type="text" :disabled="displayList[index]" @click="editContent(index)" >
                <span v-if="flag[index]"  :style="displayList[index]?'color:rgba(193,197,198,1);':'rgba(96,192,224,1)'">编辑</span>
              </el-button>
              <el-button type="text" :disabled="displayList[index]">
                <span v-if="flag[index]"  :style="displayList[index]?'color:rgba(193,197,198,1);':'rgba(96,192,224,1)'" @click="sortData(index)">排序</span>
              </el-button>
            </div>
            <div class="sortS" v-if="sortArr[index]">
              <input class="menu_input" v-model="input" style="width: 80px;background-color: #fff;margin: 10px 0 0 10px;padding-left: 10px;"   placeholder="输入商家推荐语">
             <div style="padding-left: 10px;margin-top: 10px;">
               <el-button type="primary" class="primary" @click="sortEdit(index)" style="width: 80px;height: 30px;line-height: 6px;">
                 确 定
               </el-button>
             </div>
            </div>
            <div class="sortS" style="font-size: 40px;text-align: center;line-height: 100px;"  v-if="!sortArr[index]&&flag[index]">
              {{storeList[index].sort}}
            </div>
          </div>
          <div v-if="delFlag">
            <div style="position: absolute;left: 800px;top: 30px;cursor: pointer;"
                                     :style="'top:'+(80+210*index)+'px'" @click="del(index,item)" v-if="flag[index]">
            <img src="../../assets/jianhao.png" alt="">
          </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog style="text-align: center;position: absolute;" :visible.sync="dialogVisible" size="tiny" :modal="false" :close-on-click-modal="false">
      <span style="font-size: 14px;color: rgba(89,115,128,1)">{{dialogData}}</span>
      <span slot="footer" class="dialog-footer">
                  <el-button type="primary"  @click="dialogVisible = false" class="cp_qx" v-if="sign=='del'">取 消</el-button>
                  <el-button type="primary"  @click="dialogVisible = false" class="cp_qx" v-if="sign!='del'">确 定</el-button>
                  <el-button type="primary" @click="delData()" class="cp_qx" v-if="sign=='del'">确 定</el-button>
                </span>
    </el-dialog>
    <div class="mask" v-if="dialogVisible">

    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    data(){
      return {
        upLoad:true,
        delFlag:false,
        url:'',
        dialogVisible:false,
        input:'',
        index_:'',
        Delivery_status:[],
        value:'',
        storeName:'',
        storeList:[],
        flag:[],
        objData:{fileList:[],storeNameList:[],storeRecommend:[],description:[]},
        displayList:[],
        sign:'',
        dialogData:'',
        sortArr:[],
        delData_:'',
      }
    },
    methods: {
      addList(){
        this.sign = 'add'
        if(this.storeList.length==10){
          this.dialogVisible = true
          this.dialogData = `最多添加十个推荐商家`
          return
        }
        if(this.storeList.length<10){
          console.log(111)
          this.objData.fileList.push([{name:'',url:''}])
          this.storeList.push({})
          this.flag.push(false)
          this.objData.storeNameList.push({storeName:'',storeId:''})
          this.objData.description.push('')
          this.displayList.push(true)
          console.log(this.objData.fileList)
        }
      },
      delData(val){
        this.$http.delete(`${this.$store.state.path}marketing/merchant/recommend/${this.$store.state.storeId}/${this.storeList[this.delData_].recommendId}`)
          .then(res => {
            this.sign=``
            console.log(res.body)
            if(res.body.result){
              this.dialogVisible = false
              this.cancel(this.delData_)
              this.queryData()
            }
            if(!res.body.result){
              this.dialogVisible = true
              this.dialogData = res.body.msg
            }
          }, res => {

          })
      },
      selectD(index){
        this.$set(this.displayList,index,!this.displayList[index])
//        this.$set(this.flag,index,!this.flag[index])
      },
      sortData(index){
//        if(!this.sortArr[val])
        for (let i=0;i<this.sortArr.length;i++){
            this.$set(this.sortArr,i,false)
        }
        this.input = this.storeList[index].sort
        this.$set(this.sortArr,index,!this.sortArr[index])
      },
      editContent(val){
        this.sign = 'edit'
        this.$set(this.displayList,val,!this.displayList[val])
      },
      sortEdit(index){
        let json = {
          "sort": this.input,
          "storeId": this.storeList[index].storeId
        }
        this.$http.put(`${this.$store.state.path}marketing/merchant/recommend/${this.$store.state.storeId}/${this.storeList[index].recommendId}`,json)
          .then(res => {
            console.log(res.body)
            if(res.body.result){
              this.$set(this.sortArr,index,!this.sortArr[index])
              this.queryData()
            }
            if(!res.body.result){
              this.dialogVisible = true
              this.dialogData = res.body.msg
            }
          }, res => {

          })
      },
      del(val,item){
        this.sign = 'del'
        this.delData_ = val
        this.dialogVisible = true
        this.dialogData = '你确定删除这条记录？'
      },
      cancel(index){
//        shift
        if(this.objData.storeNameList[index]&&!this.storeList[index].storeId){
          this.objData.fileList.pop()
          this.storeList.pop()
          this.flag.pop()
          this.objData.storeNameList.pop()
          this.objData.description.pop()
          this.displayList.pop()
        }
        if(this.objData.storeNameList[index]&&this.storeList[index].storeId){
          this.$set(this.displayList,index,!this.displayList[index])
        }
      },
      beforeAvatarUpload(file) {
        var isJPG = file.type == 'image/jpeg';
        var isPNG = file.type == 'image/png';
        if (!isJPG && !isPNG) {
          this.upLoad = false
          this.dialogData = '广告图非图片格式不能上传'
          this.dialogVisible = true
          return ;
        }else {
          this.upLoad = true
        }
      },
      saveEdit(val){
        let json = {
          "description": this.objData.description[val],
          "img": this.objData.fileList[val][0].url,
          "state": 1,
          "storeId": this.objData.storeNameList[val].storeId
        }
        if(!this.objData.storeNameList[val].storeId){
          this.dialogVisible = true
          this.dialogData = `请选择推荐商家`
          return
        }
        if(!this.objData.fileList[val][0].url){
          this.dialogVisible = true
          this.dialogData = `请选择背景图片`
          return
        }
        if(!this.objData.description[val].length){
          this.dialogVisible = true
          this.dialogData = `请输入商家推荐语`
          return
        }
        if(this.objData.description[val].length>16){
          this.dialogVisible = true
          this.dialogData = `商家推荐语长度最多为16个字`
          return
        }
        if(this.storeList.length>10){
          this.dialogVisible = true
          this.dialogData = `最多添加十个推荐商家`
          return
        }
        this.$set(this.displayList,val,!this.displayList[val])
        if(!this.flag[val]){
          this.$set(this.flag,val,!this.flag[val])
        }
        if(this.sign=='add'){
          this.$http.post(`${this.$store.state.path}marketing/merchant/recommend/${this.$store.state.storeId}`,json)
            .then(res => {
              console.log(res.body)
              if(res.body.result){
                this.queryData()
                console.log(this.objData.storeNameList[val].storeName)
              }
              if(!res.body.result){
                  this.dialogVisible = true
                  this.dialogData = res.body.msg
              }
            }, res => {

            })
        }
        if(this.sign=='edit'){
          this.$http.put(`${this.$store.state.path}marketing/merchant/recommend/${this.$store.state.storeId}/${this.storeList[val].recommendId}`,json)
            .then(res => {
              console.log(res.body)
              if(res.body.result){
                this.queryData()
              }
              if(!res.body.result){
                this.dialogVisible = true
                this.dialogData = res.body.msg
              }
            }, res => {

            })
        }
      },
      beforeUpload(val){
          this.index_ = val
      },
      handleSuccess(response, file){
        if(this.upLoad)this.objData.fileList[this.index_][0].url = response.result
      },
      format(){
        this.objData.fileList = []
        this.objData.storeNameList = []
        this.objData.description = []
        this.flag = []
        this.displayList = []
        this.sortArr = []
      },
      queryData(){
        this.$http.get(`${this.$store.state.path}marketing/merchant/recommend/${this.$store.state.storeId}`)
          .then(res => {
            console.log(res.body)
            this.storeList = res.body.result.result
            this.format()
            for (let i=0;i<this.storeList.length;i++){
              this.objData.fileList.push([{name:this.storeList[i].storeName,url:this.storeList[i].img}])
              this.objData.storeNameList.push({storeName:this.storeList[i].storeName,storeId:this.storeList[i].storeId})
              this.objData.description.push(this.storeList[i].description)
              this.flag.push(true)
              this.displayList.push(false)
              this.sortArr.push(false)
            }
          }, res => {

          })
      }
    },
    created(){
      this.url = `${this.$store.state.photo_path}fileName= &storeId=${this.$store.state.storeId}`
      this.queryData()
      this.$http.get(`${this.$store.state.path}stores/community/stores?communityId=${this.$store.state.storeId}&page=0&size=10000`)
        .then(res => {
          console.log(res.body)
          this.Delivery_status = res.body.result.listStoreResponseDTOS
        }, res => {

        })
    }
  }
</script>
<style scoped>
  .storePromotion {
    background-color: #F5F5F5;
    padding-left: 200px;
  }
  .storePromotion .bigBox{
    margin: 20px 320px 0 20px;
    width: 860px;
    position: relative;
    /*width: 760px;*/
    height: 87%;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .storePromotion .sortS{
    margin-left: 15px;
    width: 100px;
    height: 100px;
    background-color: rgba(248,249,249,1);
  }
  .storePromotion .midBox{
    /*position: absolute;*/

  }

  .storePromotion .search{
    width: 300px;
    height: 150px;
    background-color: rgba(248,249,249,1);
    float: left;
    margin-left: 40px;
    border-radius: 5px;
    padding-top: 10px;
  }
  .storePromotion .search1{
    width: 300px;
    height: 150px;
    background-color: rgba(248,249,249,1);
    float: left;
    margin-left: 40px;
    border-radius: 5px;
    padding-top: 10px;
  }
  .storePromotion .le{
    float: left;
  }
  .storePromotion .ri{
    float: left;
    /*margin-left: 30px;*/
    color: rgba(96,192,224,1);
    cursor: pointer;
  }
  .storePromotion .xj {
    width: 85px;
    height: 35px;
    position: absolute;
    right: 20px;
    top: 30px;
  }
  .storePromotion .sc {
    width: 85px;
    height: 35px;
    position: absolute;
    right: 120px!important;
    top: 30px;
  }
  .storePromotion .sc {
    width: 85px;
    height: 35px;
    position: absolute;
    right: 20px;
    top: 30px;
  }
  .storePromotion .top {
    height: 70px;
    line-height: 70px;
    background-color: #fff;
    font-size: 18px;
    color: #597380;
    border-bottom: 1px solid #D7D9DD;
  }

  .storePromotion .menuC {
    height: 210px !important;
    color: #656D78;
    /*border: 1px solid rgba(4, 4, 4, 0.09);*/
    border-bottom: 1px solid rgba(4, 4, 4, 0.09);
    border-radius: 5px 5px 0 0;
    background-color: rgba(255, 255, 255, 1);
    padding: 30px 0 20px 30px;
  }

  .storePromotion .top .el-col:nth-of-type(1) span {
    display: inline-block;
    width: 150px;
    height: 100%;
    line-height: 70px;
    text-align: center;
    border-right: 1px solid #D7D9DD;
  }
</style>
